body{
	border:.1em solid #aaa;
	margin: 1em auto;
	width: 90%;

	font-size: 16px;
	background-image: url(../images/background.png);
  font-family: 'Khula', sans-serif;
  font-family: 'Permanent Marker', cursive;
  /*background-size: 100% 100%;*/

}
article{

  position:relative;
  width:100%;
  height: 100%;
  text-align: center;

  
}
figure{

  position:relative;
  display:inline-block;
  width: 20em;
  height: 15em;
  margin:1em;
  transform-style:preserve-3d;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;
  transition:0.6s;
  

}
.pic> img{
  width: 100%;
  backface-visibility:hidden;
  position:relative;
  transition:0.6s;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;

}
.pic>h2{
  position: absolute;
  left:0;
  top:78%;
  color: white;
  width: 100%;
  height: 15%;
  background-color: rgba(102,204,102,1);
  border-radius: 5px;
  border-color: white;
  transition:0.6s;
  backface-visibility:hidden;
}
figure:hover > h2{
  transition:0.6s;  
  transform: rotateY(180deg);

  backface-visibility:hidden;

}
figure:hover > img{
  transition:0.6s;  
  transform: rotateY(180deg);
  backface-visibility:hidden;

}
figure:hover > figcaption{
  transition:0.6s;  
  transform: rotateY(0deg);
  backface-visibility:hidden;
}


figcaption{
  position: absolute;
  left:0;
  top:0;
  width: 100%;
  height: 100%;
  background-color: #66CC66;
  border-radius: 0px;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  backface-visibility:hidden;
  transform:rotateY(180deg);
  transition:0.6s;
}
footer ul li{
  display: inline;
  font-size: 13px;
  width:15%;
  transition:0.1s;
  margin-left: 2em;
}
footer ul li span:hover{
  border-bottom: 1px solid #C4C400;
}

footer ul li a{
  color: inherit;
  text-decoration: inherit;
}
footer ul{
  margin-top: 0px;
  margin-left: 0%;
  width: 100%;
  color:black;
  text-align: center;
}
footer{
  width: 90%;
  height: 3%;
  position:fixed;
  background-color: #66CC66;
  bottom: 0px;
  z-index: 1;
  
}
a{
  text-decoration: none;
  color:black;
}



.ec-stars-wrapper {

  font-size: 0;
  display: inline-block;
}
.ec-stars-wrapper a {
  text-decoration: none;
  display: inline-block;
  /* Volver a dar tamaño al texto */
  font-size: 32px;
  font-size: 2rem;
  
  color: #888;
}

.ec-stars-wrapper:hover a {
  color: rgb(39, 130, 228);
}
/*
 * El selector de hijo, es necesario para aumentar la especifidad
 */
.ec-stars-wrapper > a:hover ~ a {
  color: #888;
}





